<script lang="ts">
  import './button.css';
  
  type Props = {
    /**
     * Is this the principal call to action on the page?
     */
    primary?: boolean;
    /**
     * What background color to use
     */
    backgroundColor?: string;
    /**
     * How large should the button be?
     */
    size?: 'small' | 'medium' | 'large';
    /**
     * Button contents
     */
    label?: string;
    /**
     * Optional click handler
     */
    onclick?: (event: MouseEvent) => void;
    /**
     * Button contents
     */
    children?: any;
  };

  const { 
    primary = false,
    backgroundColor = undefined,
    size = 'medium',
    label = '',
    children,
    ...props
  }: Props = $props();

  let mode = $derived(primary ? 'storybook-button--primary' : 'storybook-button--secondary');
  let style = $derived(backgroundColor ? `background-color: ${backgroundColor}` : '');
</script>

<button
  type="button"
  class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
  {style}
  {...props}
>
  {label}
  {@render children?.()}
</button>
